<template>
  <NoActionGoBack/>
  <div class="wrap-wh qs-type">
    <div class="type-wrap">
      <div class="type-item" @click="routerGo('question-detail',item)" v-for="item in list">
        {{ item.title }}
      </div>
      <!--      <div class="type-item" @click="routerGo('question-detail',item)" v-for="item in list">-->
      <!--        {{ item.title }}-->
      <!--      </div>-->
    </div>
    <div class="button-login"
         style="position:absolute;bottom:40px;left:50%;transform:translateX(-50%);width:1305px;display: flex;justify-content: space-around">
      <my-button @click="routerGo('rankings',{code:'zongpaihangbang',referer:'type'})" text="排行榜"/>
      <my-button @click="routerGo('login',{code:undefined})" text="返回"/>
    </div>
  </div>

</template>
<script setup lang="ts">
import {useRouter} from "vue-router";
import {reactive} from "vue";
// import useStore from "@/store";
// const qsStore = useStore()
// qsStore.questionType.getTypeList()
// @ts-ignore
let list = reactive(JSON.parse(sessionStorage.getItem('typeList')))
const router = useRouter()

function routerGo(path: string, item: any) {
  let route = {
    path: `/${path}`,
  }
  if (item.code) {

    let obj = {
      id: item.code
    }
    if(item.referer){
      Object.assign(obj,{
        referer:item.referer
      })
    }
    Object.assign(route, {
      query: {
        ...obj
      }
    })
  }
  router.push(route)
}
</script>
<style lang="scss" scoped>

.qs-type {
  position: relative;
  background: url("../assets/Nav/navbg.png") no-repeat;
}

.type-wrap {
  position: relative;
  display: flex;
  width: 1708px;
  overflow-x: auto;
  justify-content: space-around;
  // border: 2px sandybrown solid;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);

  .type-item {
    color: rgb(71, 112, 248);
    font-size: 50px;
    font-weight: bold;
    text-align: center;
    line-height: 397px;
    cursor: pointer;
    margin-left: 30px;
    width: 397px;
    height: 397px;
    text-shadow: rgb(71, 112, 248) 1px 0 20px;
    background: url("../assets/Question/questionbg.png") no-repeat;
  }
}

::-webkit-scrollbar { //滚动条背景
  background-color: transparent;
}

::-webkit-scrollbar-thumb { //滑块内容
  background-color: transparent;
  border-radius: 8px;
}

::-webkit-scrollbar-thumb {
  // border: 2px solid red;
  background-clip: content-box;
}

</style>